import { Component, ReactNode } from "react";
import { ScrollView, View, Image, Text } from "@tarojs/components";
import { AtButton } from "taro-ui";
import i1 from "./images/i1.png";
import "./index.scss";
import Taro from "@tarojs/taro";
import Req, { BASE_URL } from "../../utils/request";

export default class OperationDetail extends Component {
  state = {
    info: {},
    imgs: [],
  };
  componentDidMount() {
    this.initData();
    Taro.eventCenter.on("refreshData", this._onBackRefresh);

  }
  _onBackRefresh = (v) => {
    if (v.force) {
      this.initData();
    }
  }
  componentWillUnmount(): void {
    Taro.eventCenter.off("refreshData", this._onBackRefresh);
  }
  initData = () => {
    const { router } = Taro.getCurrentInstance();
    if (router?.params.id) {
      Req.get("/project/progress/" + router.params.id)
        .then((r) => {
          if (r.code === 200) {
            let _imgs = [];
            if (r.data.img) {
              _imgs = r.data.img.split(",");
            }
            this.setState({
              info: r.data,
              imgs: _imgs,
            });
          }
        })
        .catch((e) => { });
    }
  };
  goEidtPage = (id: string) => {
    Taro.navigateTo({
      url: `/pages/operation-form/index?id=${id}`,
    });
  };
  onDel = () => {
    Taro.showModal({
      title: "提示",
      content: "确认删除？",
      success: (res) => {
        console.log("res", res);
        if (res.confirm) {
          const { info }: any = this.state;
          if (info?.id) {
            Req.post("/project/progress/" + info.id)
              .then((r) => {
                if (r.code === 200) {
                  Taro.showToast({
                    title: "删除成功！",
                    icon: "none",
                    duration: 2000,
                  });
                  setTimeout(() => {
                    Taro.eventCenter.trigger("refreshData", { force: true });
                    Taro.navigateBack();
                  }, 1000);
                }
              })
              .catch((e) => { });
          }
        }
      },
    });
  };
  render(): ReactNode {
    const { info, imgs }: any = this.state;
    return (
      <View className="od-container">
        <ScrollView className="od-detail-main" scrollY>
          <View className="od-detail-main-v1">
            <View className="od-detail-main-v2">
              <Text className="od-detail-main-t1">{info.projectName}</Text>
            </View>
            <View className="od-detail-main-v3"></View>
            <View className="od-detail-main-v4">
   
              <Text className="od-detail-main-t2">
                项目营收 | {(info.revenue ?? '-') + ' 万元'}
              </Text>
              <Text className="od-detail-main-t2">
                项目利润 | {(info.profit ?? '-') + ' 万元'}
              </Text>           
              <Text className="od-detail-main-t2">
                截止日期 | {info.deadline}
              </Text>
            </View>
          </View>
          <View className="od-detail-main-v5">
            <Text className="od-detail-main-t4">{info.memo}</Text>
            {imgs.map((e, index) => (
              <View>
                <Image
                  mode="widthFix"
                  className="article-img" 
                  key={index} src={BASE_URL + e} />
              </View>
            ))}
          </View>
        </ScrollView>
        <View className="bottom-btns">
          <AtButton
            onClick={this.onDel}
            className="info-btn-color"
            circle
            type="primary"
          >
            删除
          </AtButton>
          <AtButton
            onClick={() => {
              this.goEidtPage(info.id);
            }}
            className="primary-btn-color"
            circle
            type="primary"
          >
            编辑
          </AtButton>
        </View>
      </View>
    );
  }
}
